<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Link Generator</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
  <div id="container">
    <header>
      <hgroup>
        <h1>Link Generator</h1>
        <h2 id="version">Unknown Version</h2>
      </hgroup>

      <nav>
        <ul>
          <li><a href="../list.html">Home</a></li>
        </ul>
      </nav>
    </header>
    <div id="main" role="main">
      <p>God helps those who help themselves.</p>
      <div>
        <form id="queryForm" method="get">
          <p id="urlMode">
            <label for="urlField">URL:</label> <input id="urlField" name="url" style="width: 50em;"/><br />
          </p>
          <p>
            <input id="submitButton" type="submit" value="Submit" />
            <input id="resetButton" type="reset" value="Reset" />
          </p>
        </form>
      </div>
      <div id="linkBar"></div>
    </div>
    <footer>
      <p>copyright &copy; 2011</p>
    </footer>
  </div> <!--! end of #container -->


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../script/libs/jquery-1.7.1.js"><\/script>')</script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>
    function substringBetween(str, open, close) {
        var INDEX_NOT_FOUND = -1;

        if (str == null || open == null || close == null) {
            return null;
        }
        var start = str.indexOf(open);
        if (start !== INDEX_NOT_FOUND) {
            var end = str.indexOf(close, start + open.length);
            if (end !== INDEX_NOT_FOUND) {
                return str.slice(start + open.length, end);
            }
        }
        return null;
    }

    function escapeHtml(input) {
        return $('<div/>').text(input).html();
    }

    function unescapeHtml(input) { 
        return $('<div/>').html(input).text();
    }
  </script>
  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);

        // form handler
        $('#queryForm').submit(function() {
            var url = $.trim($('#urlField').val());

            if (url) {
                createLink(url);
            }

            return false;
        });
    });

    function createLink(url) {
        var template = '<a href="{0}" target="_blank">{0}</a><br />';
        var linkHtml = template.replace(/\{0\}/g, url);

        $('#linkBar').append(linkHtml);
    }
  </script>
</body>
</html>